function drawText(
    ctx,
    { x, y, color = "black", size = 17, align, baseline, text }
) {
    ctx.save();
    ctx.font = `bold ${size}px "Noto Serif SC"`;
    ctx.fillStyle = color;
    ctx.textAlign = align;
    ctx.fillText(text, x, y);
    ctx.restore();
}
/** 画一列文本 */
function drawTextVertical(
    ctx,
    { x, y, color = "black", size = 17, align, text, height }
) {
    ctx.save();
    ctx.font = `bold ${size}px "Noto Serif SC"`;
    ctx.fillStyle = color;
    ctx.textAlign = align;
    const words = text.split("");
    const step = height / (words.length + 1);
    words.forEach((item, index) => {
        ctx.fillText(item, x, y + step * (index + 1));
    });
    ctx.restore();
}
/** 文本分列 */
function drawTextVerticalWrap(ctx, { x, y, width, size, text, ...args }) {
    let tr = text.split("\n");
    x = x - (tr.length * width) / 2 - width;
    tr.forEach((text, index) => {
        var txt = {
            x: x + index * width,
            y,
            size,
            text,
            ...args,
        };
        drawTextVertical(ctx, txt);
    });
}
function chunk(array, sub) {
    return array.reduce((col, cur, index) => {
        if (index % sub) {
            col[col.length - 1].push(cur);
        } else {
            col[col.length] = [cur];
        }
        return col;
    }, []);
}

function textWrap(
    ctx,
    { x, y, height, color, size, align, baseline = "bottom", text }
) {
    let tr = text
        .split("\n")
        .map((i) => {
            if (i.length > 14) {
                return chunk([...i], 12).map((i) => i.join(""));
            } else {
                return i;
            }
        })
        .flat();

    y = y - (tr.length * height) / 2;

    tr.forEach((text, index) => {
        var txt = {
            x,
            y: y + index * height,
            color,
            size,
            align,
            baseline,
            text,
        };
        drawText(ctx, txt);
    });
}
async function roundRect(ctx, { x, y, w, h, r }, cb) {
    ctx.save();
    // 开始绘制
    ctx.beginPath();
    // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
    ctx.fillStyle = "transparent";
    // 绘制左上角圆弧
    ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);

    // 绘制border-top
    ctx.moveTo(x + r, y);
    ctx.lineTo(x + w - r, y);
    ctx.lineTo(x + w, y + r);
    // 绘制右上角圆弧
    ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);

    // 绘制border-right
    ctx.lineTo(x + w, y + h - r);
    ctx.lineTo(x + w - r, y + h);
    // 绘制右下角圆弧
    ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);

    // 绘制border-bottom
    ctx.lineTo(x + r, y + h);
    ctx.lineTo(x, y + h - r);
    // 绘制左下角圆弧
    ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);

    // 绘制border-left
    ctx.lineTo(x, y + r);
    ctx.lineTo(x + r, y);

    ctx.fill();
    // ctx.stroke()
    ctx.closePath();
    // 剪切
    ctx.clip();
    await cb({ x, y, w, h, r });
    ctx.restore();
}
function drawImage(canvas, ctx, src, ...args) {
    return new Promise((resolve) => {
        let img = canvas.createImage(); //创建img对象
        //如果需要向canvas里载入多张图片，则需要分别创建多个img对象
        //let img2=this.data.canvas.createImage()；
        //    img2.οnlοad=()=>{};
        //    img2.src="";
        img.onload = () => {
            ctx.drawImage(img, ...args);
            resolve();
        };
        img.src = src;
    });
}
export default async function (ctx, canvas, data, px = 1) {
    console.log("画图", px, data);
    ctx.font = "bold 10px Noto Serif SC";
    ctx.rect(0, 0, 380 * px, 600 * px);
    ctx.fillStyle = "white";
    ctx.fill();
    // ctx.drawImage(path, 0, 0, 380, 600);
    const firstLine = 70;
    // date 日期绘制
    drawText(ctx, {
        x: 30 * px,
        y: firstLine * px,
        height: 30 * px,
        color: "#000",
        size: 30 * px,
        align: "left",
        baseline: "top",
        text: data.date,
        bold: false,
    });
    drawText(ctx, {
        x: 70 * px,
        y: firstLine * px,
        height: 30 * px,
        color: "#000",
        size: 14 * px,
        align: "left",
        baseline: "top",
        text: ["", data.months + 1, data.years].join("/"),
        bold: false,
    });
    // 农历
    drawText(ctx, {
        x: 130 * px,
        y: firstLine * px,
        height: 30 * px,
        color: "#000",
        size: 16 * px,
        align: "left",
        baseline: "top",
        text: data.nongli,
        bold: false,
    });
    // 星期
    drawText(ctx, {
        x: 210 * px,
        y: firstLine * px,
        height: 30 * px,
        color: "#000",
        size: 16 * px,
        align: "left",
        baseline: "top",
        text: data.weekday,
        bold: false,
    });
    let { path: path1 } = await wx.getImageInfo({
        src: "cloud://xinyuqian-5gvjlw4d0eabb09e.7869-xinyuqian-5gvjlw4d0eabb09e-1307420821/static/logo.png",
    });
    let { path: path2 } = await wx.getImageInfo({
        src: "cloud://xinyuqian-5gvjlw4d0eabb09e.7869-xinyuqian-5gvjlw4d0eabb09e-1307420821/static/qrcode.png",
    });
    await drawImage(
        canvas,
        ctx,
        path1,
        260 * px,
        (firstLine - 40) * px,
        50 * px,
        50 * px
    );
    await drawImage(
        canvas,
        ctx,
        path2,
        320 * px,
        (firstLine - 30) * px,
        35 * px,
        35 * px
    );

    // title
    drawTextVerticalWrap(ctx, {
        text: data.title,
        x: 150 * px,
        y: 80 * px,
        color: "#000",
        size: 44 * px,
        width: 54 * px,
        height: 280 * px,
    });

    //    description;
    let details = {
        x: 180 * px,
        y: 220 * px,
        height: 27 * px,
        color: "#000",
        size: 14 * px,
        align: "left",
        baseline: "top",
        text: data.description,
        bold: false,
    };
    textWrap(ctx, details);
    // 大图
    let {
        path: path3,
        height,
        width,
    } = await wx.getImageInfo({ src: data.image });

    await roundRect(
        ctx,
        {
            x: 18 * px,
            y: 340 * px,
            w: 340 * px,
            h: 200 * px,
            r: 16 * px,
        },
        ({ x, y, h, w }) => {
            return drawImage(canvas, ctx, path3, x, y, w, h);
        }
    );

    // 祝福语
    drawText(ctx, {
        x: (185 - data.please.length * 7) * px,
        y: 570 * px,
        size: 14 * px,
        baseline: "middle",
        text: data.please,
    });
    // 保存卡片数据
    const CardPath = await new Promise((resolve) => {
        wx.canvasToTempFilePath({
            fileType: "png",
            width: 380 * px,
            height: 600 * px,
            canvas,
            success: function (res) {
                var tempFilePath = res.tempFilePath;
                resolve(tempFilePath);
            },
        });
    });

    const border = { top: 12, left: 17 };

    // 高斯模糊写入
    await drawImage(
        canvas,
        ctx,
        path3,
        width / 2 - (height * 4) / 12,
        0,
        (height * 4) / 6,
        height,
        0,
        0,
        (380 + border.left * 2) * px,
        (600 + border.top * 2) * px
    );

    await drawImage(
        canvas,
        ctx,
        CardPath,
        border.left * px,
        border.top * px,
        380 * px,
        600 * px
    );
    return {
        width: (380 + border.left * 2) * px,
        height: (600 + border.top * 2) * px,
    };
}
